<template>
  <div ref="wrapRef" :style="{ height, width }" class="globalMap"></div>
  <!-- :style="{ left: fieldPopupLeft - 307 + 'px', top: fieldPopupTop - 620 + 'px' }" -->
  <div
    v-if="showFieldPopup"
    :style="{ left: fieldPopupLeft - 307 + 'px', top: '50%' }"
    class="custom-popup-1"
  >
    <div class="close" title="关闭" @click="closeFieldPopup"></div>
    <header class="header">
      <span>{{ fieldPopupData.title }}</span>
    </header>
    <div class="body">
      <div class="container">
        <div class="left">
          <span>种植大户名称：{{ fieldPopupData.field1 }}</span>
          <span>种植作物类型：{{ fieldPopupData.field2 }}</span>
          <span>田块面积(亩)：{{ fieldPopupData.field3 }}</span>
          <span>关联泵站：{{ fieldPopupData.field4 }}</span>
          <span>土壤含水量(%)：{{ fieldPopupData.field5 }}</span>
          <span>温度(℃)：{{ fieldPopupData.field6 }}</span>
          <span>旱涝情况：{{ fieldPopupData.field7 }}</span>
          <span>实时用水量(m³)：{{ fieldPopupData.field8 }}</span>
          <span>预测需水量(m³)：{{ fieldPopupData.field9 }}</span>
          <span>作物种植时间：{{ fieldPopupData.field10 }}</span>
          <!-- <span>作物种植时期：{{ fieldPopupData.field12 }}</span> -->
        </div>
        <div class="right">
          <div class="img">
            <template v-if="fieldPopupData.field11">
              <img :src="fieldPopupData.field11" alt="" class="img" />
              <p class="sq">{{ fieldPopupData.field12 }}</p>
            </template>

            <div class="noImage" v-else>
              <img width="80%" height="80%" :src="noImage" />
              <p>暂无图片</p>
            </div>
          </div>
          <!--          <span class="text">抽穗期（播种后75天）</span>-->
        </div>
      </div>
    </div>
  </div>
  <div
    v-if="showChannelPopup"
    :style="{ left: channelPopupLeft - 182 + 'px', top: channelPopupTop - 295 + 'px' }"
    class="custom-popup-2"
  >
    <div class="close" title="关闭" @click="closeChannelPopup"></div>
    <div class="head">{{ channelPopupData.name }}</div>
    <div class="body">
      <table style="width: 100%">
        <tr>
          <td style="text-align: right" width="40%">渠道名称：</td>
          <td>{{ channelPopupData.name }}</td>
        </tr>
        <tr>
          <td>渠道类型：</td>
          <td v-if="channelPopupData.level == 1">干渠</td>
          <td v-else-if="channelPopupData.level == 2">分干渠</td>
          <td v-else-if="channelPopupData.level == 3">支渠</td>
          <td v-else-if="channelPopupData.level == 4">支沟</td>
          <td v-else>{{ channelPopupData.level }}未知</td>
        </tr>
        <tr>
          <td>渠道长度(m)：</td>
          <td>{{ channelPopupData.length }}</td>
        </tr>
        <tr>
          <td>设计流量(m³/s)：</td>
          <td>{{ channelPopupData.flow }}</td>
        </tr>
        <tr>
          <td>渠道宽度(m)：</td>
          <td>{{ channelPopupData.width }}</td>
        </tr>
        <tr>
          <td>渠道深度(m)：</td>
          <td>{{ channelPopupData.depth }}</td>
        </tr>
        <tr>
          <td>渠道坡度：</td>
          <td>{{ channelPopupData.slope }}</td>
        </tr>
      </table>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { onBeforeUnmount, onMounted, reactive, ref } from "vue";
import { destroyViewer, initBasicMap } from "./cesiumGlobe";
import { useFieldPopup } from "@/components/GlobalCesium/src/useFieldPopup";
import { Channel, FieldInfo } from "@/components/GlobalCesium/src/type";
import noImage from "@/assets/svg/no-image.svg";
import { useChannelPopup } from "@/components/GlobalCesium/src/useChannelPopup";

defineProps({
  width: {
    type: String,
    default: "100%",
  },
  height: {
    type: String,
    default: "100%",
  },
});

const wrapRef = ref<any>();

const fieldPopupData: FieldInfo = reactive({
  title: "",
  field1: "",
  field2: "",
  field3: "",
  field4: "",
  field5: "",
  field6: "",
  field7: "",
  field8: "",
  field9: "",
  field10: "",
  field11: "",
  field12: "",
});
const showFieldPopup = ref(false);
const fieldPopupLeft = ref(1200);
const fieldPopupTop = ref(200);
let closeFieldPopup: any;

const channelPopupData: Channel = reactive({
  name: "",
  level: 0,
  length: 0,
  flow: 0,
  width: 0,
  depth: 0,
  slope: 0,
});
const showChannelPopup = ref(false);
const channelPopupLeft = ref(1200);
const channelPopupTop = ref(200);
let closeChannelPopup: any;

onMounted(() => {
  const viewer = initBasicMap(wrapRef);
  const { registerFieldClick, closeFieldWindow } = useFieldPopup(
    showFieldPopup,
    fieldPopupLeft,
    fieldPopupTop,
    fieldPopupData,
    viewer
  );
  registerFieldClick();
  closeFieldPopup = closeFieldWindow;
  const { registerChannelClick, closeChannelWindow } = useChannelPopup(
    showChannelPopup,
    channelPopupLeft,
    channelPopupTop,
    channelPopupData,
    viewer
  );
  registerChannelClick();
  closeChannelPopup = closeChannelWindow;
});

onBeforeUnmount(() => {
  destroyViewer();
});
</script>

<style lang="less" rel="stylesheet/less" scoped>
@import "./popup.scss";

.globalMap {
  width: 100%;
  height: 100%;
}
</style>
<style>
.cesium-viewer > div:not(:first-child) {
  display: none !important;
}
</style>
